/**
 * 数采地图 - 地图
 */
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { connect } from 'umi';
import event from '../../event';

@connect(({ group }) => ({
  group,
}))
export default class extends React.Component {
  componentDidMount = () => {
    this.renderMap(this.dom);
  };

  // 渲染地图
  renderMap = dom => {
    var myChart = echarts.init(dom);
    let iconRQ =
      'image://';

    // 地点坐标 （经纬度）
    let data = [
      {
        name: '乐亭电厂',
        value: [116.24, 39.55],
      },
      {
        name: '呼和浩特电厂',
        value: [114.271522, 22.753644],
      },

      {
        name: '汉口电厂',
        value: [106.54, 29.59],
      },
      {
        name: '萧山电厂',
        value: [120.19, 30.26],
      },
      {
        name: '西山电厂',
        value: [121.4648, 31.2891],
      },
    ];

    // label数据
    let LableData = [
      {
        name: '乐亭电厂',
        coords: [
          [116.24, 39.55, 100],
          [120.24, 46.55, 100],
        ], // 线条位置[开始位置，结束位置]
        value: [1021, 120],
      },
      {
        name: '呼和浩特电厂',
        coords: [
          [114.271522, 22.753644],
          [118.24, 18.55, 100],
        ], // 线条位置[开始位置，结束位置]
        value: [1021, 120],
      },
      {
        name: '汉口电厂',
        coords: [
          [106.54, 29.59],
          [104.24, 35.55],
        ], // 线条位置[开始位置，结束位置]
        value: [1021, 120],
      },
      {
        name: '萧山电厂',
        coords: [
          [120.19, 30.26],
          [125.24, 27.55, 100],
        ], // 线条位置[开始位置，结束位置]
        value: [1021, 120],
      },
      {
        name: '西山电厂',
        coords: [
          [121.4648, 31.2891],
          [122.4648, 32.2891],
        ], // 线条位置[开始位置，结束位置]
        value: [1201, 60],
      },
    ];

    // 配置项
    var option = {
      // backgroundColor: '#000f1e',
      backgroundColor: '#fff',
      geo: {
        map: 'china',
        aspectScale: 0.85,
        zoom: 1.3, //当前视角的缩放比例
        layoutCenter: ['50%', '50%'], //地图位置
        layoutSize: '100%',
        itemStyle: {
          normal: {
            shadowColor: '#276fce',
            shadowOffsetX: 0,
            shadowOffsetY: 15,
            opacity: 0.5,
          },
          emphasis: {
            areaColor: '#276fce',
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',

              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9',
                },
              },
            },
            label: {
              show: false,
              color: '#FFFFFF',
              fontSize: 12,
            },
          },
        ],
      },
      series: [
        // 常规地图
        {
          type: 'map',
          mapType: 'china',
          aspectScale: 0.85,
          layoutCenter: ['50%', '50%'], //地图位置
          layoutSize: '100%',
          zoom: 1.3, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },
          itemStyle: {
            normal: {
              areaColor: '#007ED9',
              borderColor: '#ccc',
              borderWidth: 1.5,
            },
            emphasis: {
              areaColor: '#1CBADD',
              label: {
                color: '#fff',
              },
            },
          },
        },
        {
          //首都星图标
          name: '首都',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: [
            {
              name: '首都',
              value: [116.24, 41.55, 100],
            },
          ],
          symbol: iconRQ,
          symbolSize: 20,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        // 区域散点图
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          symbolSize: 10,
          rippleEffect: {
            //坐标点动画
            period: 3,
            scale: 5,
            brushType: 'fill',
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#b3e2f2',
              fontWeight: 'bold',
              fontSize: 16,
            },
          },

          data: data,
          itemStyle: {
            //坐标点颜色
            normal: {
              show: true,
              color: '#ff8003',
              shadowBlur: 20,
              shadowColor: '#fff',
            },
            emphasis: {
              areaColor: '#f00',
            },
          },
        },

        //   {
        //     name: 'lable',
        //     type: 'scatter',
        //     coordinateSystem: 'geo',
        //     symbol: 'pin',
        //     symbolSize: [50,50],
        //     label: {
        //         normal: {
        //             show: true,
        //             textStyle: {
        //                 color: '#fff',
        //                 fontSize: 9,
        //             },
        //             formatter (value){
        //                 return value.data.value[1]
        //             }
        //         }
        //     },
        //     itemStyle: {
        //         normal: {
        //             color: '#D8BC37', //标志颜色
        //         }
        //     },
        //     data: data,
        //     showEffectOn: 'render',
        //     rippleEffect: {
        //         brushType: 'stroke'
        //     },
        //     hoverAnimation: true,
        //     zlevel: 1
        // },
        {
          type: 'lines',
          zlevel: 3,
          symbol: 'circle',
          symbolSize: [5, 5],
          color: '#ff8003',
          opacity: 1,
          label: {
            show: true,
            padding: [10, 20],
            color: '#fff',
            backgroundColor: '#156198',
            borderColor: '#aee9fb',
            borderWidth: 1,
            borderRadius: 6,
            formatter(params) {
              let arr = [
                params.name,
                '条数：' + params.value[1],
                // '废气污染：' + params.value[0],
              ];
              return arr.join('\n');
            },
            textStyle: {
              align: 'left',
              lineHeight: 20,
            },
            //   normal: {

            //     textStyle: {
            //         color: '#fff',
            //         fontSize: 9,
            //     },
            //     formatter (value){
            //         return value.data.value[2]
            //     },

            // },
          },
          lineStyle: {
            type: 'solid',
            color: '#F98237',
            width: 0.5,
            opacity: 1,
          },
          data: LableData,
        },
      ],
    };

    myChart.on('click', function(params) {
      console.log(params);
      event.emit('mapClick', params);
    });
    myChart.setOption(option);
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  };

  // icon
  getItem = (params = {}) => {
    var style = {};
    if (params.end) style.marginBottom = 0;
    console.log(style);
    return (
      <div className={styles.item} style={style}>
        <div className={styles.itemBox}>
          <img src={params.icon} />
          <div className={styles.numText}>{params.numText}</div>
        </div>
        <div className={styles.text}>{params.text}</div>
      </div>
    );
  };

  render() {
    const { group } = this.props;
    return (
      <div className={styles.root}>
        <div
          ref={dom => {
            this.dom = dom;
          }}
          className={styles.map}
        ></div>

        <div className={styles.options}>
          {this.getItem({
            icon: require('./img/icon1.png'),
            text: '地磅',
            numText: group.bbbb1,
          })}

          {this.getItem({
            icon: require('./img/icon2.png'),
            text: 'SIS',
            numText: group.bbbb2,
          })}

          {this.getItem({
            icon: require('./img/icon3.png'),
            text: '随手拍',
            numText: group.bbbb3,
          })}

          {this.getItem({
            icon: require('./img/icon4.png'),
            text: '钉钉录入',
            numText: group.bbbb4,
            end: true,
          })}
        </div>
      </div>
    );
  }
}
